<template>
  <a-card>
    <a-space class="operator">
      <!-- <a-button type="primary" v-on:click="add()">新建</a-button> -->
      <!-- <a-button >批量操作</a-button> -->
      <!-- <a-dropdown>
        <a-menu  slot="overlay"> -->
          <!-- <a-menu-item key="delete">删除</a-menu-item>
            <a-menu-item key="audit">审批</a-menu-item> -->

          <!-- <a-menu-item key="toLead">
            <a-icon type="upload" />导入
            <input
              type="file"
              title=""
              @change="fileChange"
              v-show="false"
              id="upload"
            />
          </a-menu-item> -->

          <!-- <a-menu-item
            v-on:click="batchDel()"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="delete" />批量删除
          </a-menu-item>

        </a-menu>
        <a-button> 批量操作 <a-icon type="down" /> </a-button>
      </a-dropdown> -->

      <!-- <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">

        <a-menu-item key="delete">删除</a-menu-item>
          <a-menu-item key="audit">审批</a-menu-item> 

          <a-menu-item key="toLead">
            <a-icon type="upload" />导入
            <input
              type="file"
              title=""
              @change="fileChange"
              v-show="false"
              id="upload"
            />
          </a-menu-item>

          <a-menu-item key="toOut">
            <a-icon type="vertical-align-bottom" />导出
          </a-menu-item>
        </a-menu>
        <a-button> 更多操作 <a-icon type="down" /> </a-button>
      </a-dropdown> -->
    </a-space>
    <!-- <standard-table
        :columns="columns"
        :dataSource="dataSource"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="description" slot-scope="{ text }">
          {{ text }}
        </div>
        <div slot="action" slot-scope="{ text, record }">
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table> -->
    <!-- <div class="table-adv"> -->
    <advance-table
      :columns="columns"
      :data-source="dataSource"
     
      :title="tableTitle"
      :loading="loading"
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
      :rowClassName="rowClassName"
      :format-conditions="true"
      @reset="onReset"
      :bordered="false"
      :scroll="{ x: 1000 }"
      :pagination="false"
    >
     
      
     

      <template slot="userName" slot-scope="{ text }">
        {{ text.userName
        }}({{text.nickName}})
      </template>
<template slot="expandedRowRender" slot-scope="{record}" style="margin: 0">
        <ul class="expanded_row_render">
           <li><span>请求路径</span> <span>{{record.path}}</span> </li>
           <li><span>请求参数</span>   <span>{{record.operation_content}}</span></li>
          </ul>
    </template>
      <!-- <template slot="operation" slot-scope="{ text }">
        <div class="operation"> -->
          <!-- <a href="javascript:;" v-on:click="operate('edit', text)">编辑</a> -->

          <!-- <a-popconfirm
            :title="`确定要${text.top_time ? '取消' : '标记'}异常吗?`"
            @confirm="() => operate('onTop', text)"
          >
            <a href="javascript:;" v-show="text.top_time">取消异常</a>
            <a href="javascript:;" v-show="!text.top_time">标记异常</a>
          </a-popconfirm> -->
          <!-- <a-popconfirm
            :title="`确定要删除吗?`"
            @confirm="() => operateDel(text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm> -->
        <!-- </div>
      </template> -->
    </advance-table>

    <div class="show-right">
      <a-pagination
        :current="page"
        :pageSize="pageSize"
        :total="total"
        :showSizeChanger="true"
        :showLessItems="true"
        :showQuickJumper="true"
        :pageSizeOptions="['10', '20', '50', '100', '500', ...total.toString()]"
        :scroll="{ x: 1300 }"
        :showTotal="
          (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
        "
        @change="onPageChange"
        @showSizeChange="onSizeChange"
        :loading="loading"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value == total">全部</span>
          <span v-else>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>

  </a-card>
</template>

<script>
// import StandardTable from "@/components/table/StandardTable";
import AdvanceTable from "@/components/table/advance/AdvanceTable";


import {
  operationLogList
}  from "@/services/operationLog";






export default {
  name: "TeachingCulture",
  components: { AdvanceTable },
  data() {
    return {
      loading: false, //表格是否加载中
      page: 1, //第几页
      pageSize: 10, //一页多少条
      total: 0, //总共多少条
      tableTitle: " ", //表格标题
      keyWord: {}, //关键词搜索
      selectedRowKeys: [], //批量操作
      columns: [
        //显示什么列
        {
           title: "用户名(昵称)",
          //  returnField: "like-role-name",
           scopedSlots: { customRender: "userName" }, 
           manyField: ["like-admins-nickName", "like-admins-userName"],
        },
         {
          title: "IP来源",
          returnField: "like-operation_log-ip",
          dataIndex:"ip",
        },
         {
          title: "请求方式",
          returnField: "equal-operation_log-method",
          dataIndex:"method",
          dataType: "select",

           search: {
            selectOptions: [
              { title: "POST", value: "POST" },
              { title: "GET", value:  "GET" },
              { title: "PUT", value:  "PUT" },
              { title: "DELETE", value:  "DELETE"  },
            ],
          },
        },
          {
          title: "描述",
          // returnField: "like-operation_log-describe",
           manyField: ["like-operation_log-describe"],

          dataIndex:"describe",
          width: 250,

        },
        {
          title: "操作时间",
          dataIndex: "create_time",
          returnField: "equal-role-create_time",
          dataType: "date",
          width: 200,
          notSearch: true,
        //  fixed: "right",
          //  searchAble: true,
          // ellipsis: true,
        },
        
        // {
        //   // searchAble: true,
        //   dataIndex: "status",
        //   dataType: "select",
        //   slots: { title: "statusTitle" },
        //   scopedSlots: { customRender: "status" },
        //   search: {
        //     selectOptions: [
        //       { title: "已下单", value: 1 },
        //       { title: "已付款", value: 2 },
        //       { title: "已审核", value: 3 },
        //       { title: "已发货", value: 4 },
        //     ],
        //   },
        // },
        // {
        //   title: "发货",
        //   // searchAble: true,
        //   dataIndex: "send",
        //   dataType: "boolean",
        //   scopedSlots: { customRender: "send" },
        //   search: {
        //     switchOptions: {
        //       checkedText: "开",
        //       uncheckedText: "关",
        //     },
        //   },
        // },
        // {
        //   title: "审核时间",
        //   dataIndex: "auditTime",
        //   dataType: "time",
        // },
        // {
        //   title: "操作",
        //   // fixed: "right",
        //   notSearch: true,
        //   width: 130,
        //   scopedSlots: { customRender: "operation" },
        // },
      ],
      dataSource: [], //显示的数据
      conditions: {}, //条件
      visible: false, //导入弹出层
      fileFormData: {}, //文件上传预备
      uploadForm: this.$form.createForm(this),
    };
  },
  authorize: {
    operate: "编辑",
    add: "添加",
    operateDel: "删除",
    batchDel: "删除",
  },
  created() {
    // this.getColumns()
    this.tableLoad(); //表格查询
  },
  methods: {
    onSearch(conditions, searchOptions) {
      // console.log(searchOptions);
      // console.log(conditions);
      this.keyWord = conditions;
      this.page = 1;
      // this.conditions = conditions;
      this.tableLoad();
    },
    rowClassName(){
    //  return 'test'
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.tableLoad();
    },
    onRefresh(conditions) {
      this.conditions = conditions;
      this.tableLoad();
    },
    onReset(conditions) {
      this.conditions = conditions;
      this.tableLoad();
    },
    onPageChange(page, pageSize) {
      // alert()
      this.page = page;
      this.pageSize = pageSize;
      this.tableLoad();
    },

    add() {
      this.$router.push("/personnelManagement/roleAdd");
    },

    async tableLoad() {
      this.loading = true;
      const { page, pageSize, keyWord } = this;

      // console.log(teachingGoupByList);

      let data = await operationLogList({
        page: page,
        pageSize: pageSize,
        keyWord: keyWord,
      });
      //console.log(teaching);
      const { list, total } = data.data;
      this.dataSource = list;
      this.total = total;
      this.loading = false;
    },
    async operate(key, data, top = false) {
      // const { sysTime, $message, tableLoad } = this;
      // switch (
      //   key //置顶操作
      // ) {
      //   case "onTop":
      //     $message.loading({ content: "修改中", key: "loading" });
      //     let res = await roleEdit({
      //       formData: { top_time: data.top_time && !top ? null : sysTime() },
      //       id: data.id,
      //     });
      //     if (res.code == 200) {
      //       $message.success({
      //         content: "修改成功",
      //         key: "loading",
      //         duration: 2,
      //       });
      //       tableLoad();
      //     }

      //     break;

      //   case "edit":
      //     this.$router.push({
      //       path: "/personnelManagement/RoleEdit",
      //       query: { role_id: data.id },
      //     });

      //     break;
      // }
    },
     batchDel() {
      // const { sysTime, $message, tableLoad, $confirm,selectedRowKeys } = this;

      // $confirm({
      //   title: "确定要删除吗?",
      //   async onOk() {
      //     $message.loading({ content: "删除中", key: "loading" });
      //     let res = await roleEdit({
      //       formData: { delete_time: sysTime() },
      //       id: selectedRowKeys,
      //     });
      //     if (res.code == 200) {
      //       $message.success({
      //         content: "删除成功",
      //         key: "loading",
      //         duration: 2,
      //       });
      //       tableLoad();
      //     }
      //   },
      // });
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
   async operateDel(data) {
      const { sysTime, $message, tableLoad } = this;

      $message.loading({ content: "删除中", key: "loading" });
      let res = await roleEdit({
        formData: { delete_time: sysTime() },
        id: data.id,
      });
      if (res.code == 200) {
        $message.success({
          content: "删除成功",
          key: "loading",
          duration: 2,
        });
        tableLoad();
      }
    },
   
  },
};
</script>

<style lang="less" scoped>
.table-adv {
  max-width: 100%;
  // border: 1px solid blue;
  overflow: auto;
  white-space: nowrap;
}

.show-right {
  float: right;
  margin-top: 10px;
}
.operation {
  display: flex;
  justify-content: space-between;
}
.over-one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.test{
  background: red;
}
.expanded_row_render{
     list-style: none;
     line-height: 30px;
    //  height: 100px;
}
</style>
